// 定位
.static{position: static;}
.fixed{position: fixed;}
.absolute{position: absolute;}
.relative{position: relative;}
/* sticky
以浏览器的可视窗口为参照点移动元素（固定定位特点）
粘性定位占有原先的位置（相对定位特点）
必须添加 top 、left、right、bottom 其中一个才有效
1、父元素不能overflow:hidden或者overflow:auto属性。
2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
3、父元素的高度不能低于sticky元素的高度
4、sticky元素仅在其父元素内生效
 */
.sticky{position: sticky;}

// Top / Right / Bottom / Left
@for $i from 0 through 200 {
  .inset-#{$i} {
    top: 1px*$i;
    right: 1px*$i;
    bottom: 1px*$i;
    left: 1px*$i;
  }
  .inset-x-#{$i}{
    left: 1px*$i;
    right: 1px*$i;
  }
  .inset-y-#{$i} {
    top: 1px*$i;
    bottom: 1px*$i;
  }
  .top-#{$i} {
    top: 1px*$i;
  }
  .bottom-#{$i} {
    bottom: 1px*$i;
  }
  .left-#{$i} {
    left: 1px*$i;
  }
  .right-#{$i} {
    right: 1px*$i;
  }
  // 负数
  .-top-#{$i} {
    top: 1px*$i;
  }
  .-bottom-#{$i} {
    bottom: 1px*$i;
  }
  .-left-#{$i} {
    left: 1px*$i;
  }
  .-right-#{$i} {
    right: 1px*$i;
  }
}
.top-auto{top: auto;}
.top-1\/2 {top: 50%;}
.top-1\/3{top: 33.333333%;}
.top-2\/3{top: 66.666667%;}
.top-1\/4{top: 25%;}
.top-2\/4{top: 50%;}
.top-3\/4{top: 75%;}
.top-full{top: 100%;}

.-top-1\/2 {top: -50%;}
.-top-1\/3{top: -33.333333%;}
.-top-2\/3{top: -66.666667%;}
.-top-1\/4{top: -25%;}
.-top-2\/4{top: -50%;}
.-top-3\/4{top: -75%;}
.-top-full{top: -100%;}

.bottom-auto{bottom: auto;}
.bottom-1\/2 {bottom: 50%;}
.bottom-1\/3{bottom: 33.333333%;}
.bottom-2\/3{bottom: 66.666667%;}
.bottom-1\/4{bottom: 25%;}
.bottom-2\/4{bottom: 50%;}
.bottom-3\/4{bottom: 75%;}
.bottom-full{bottom: 100%;}

.-bottom-1\/2 {bottom: -50%;}
.-bottom-1\/3{bottom: -33.333333%;}
.-bottom-2\/3{bottom: -66.666667%;}
.-bottom-1\/4{bottom: -25%;}
.-bottom-2\/4{bottom: -50%;}
.-bottom-3\/4{bottom: -75%;}
.-bottom-full{bottom: -100%;}

.left-auto{left: auto;}
.left-1\/2 {left: 50%;}
.left-1\/3{left: 33.333333%;}
.left-2\/3{left: 66.666667%;}
.left-1\/4{left: 25%;}
.left-2\/4{left: 50%;}
.left-3\/4{left: 75%;}
.left-full{left: 100%;}

.-left-1\/2 {left: -50%;}
.-left-1\/3{left: -33.333333%;}
.-left-2\/3{left: -66.666667%;}
.-left-1\/4{left: -25%;}
.-left-2\/4{left: -50%;}
.-left-3\/4{left: -75%;}
.-left-full{left: -100%;}

.right-1\/2 {right: 50%;}
.right-1\/3{right: 33.333333%;}
.right-2\/3{right: 66.666667%;}
.right-1\/4{right: 25%;}
.right-2\/4{right: 50%;}
.right-3\/4{right: 75%;}
.right-full{right: 100%;}

.-right-1\/2 {right: -50%;}
.-right-1\/3{right: -33.333333%;}
.-right-2\/3{right: -66.666667%;}
.-right-1\/4{right: -25%;}
.-right-2\/4{right: -50%;}
.-right-3\/4{right: -75%;}
.-right-full{right: -100%;}